'use client';

// ShadCn
import { Card, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';

// Components
// import { PdfViewer, BaseButton, NewInvoiceAlert, InvoiceLoaderModal, InvoiceExportModal } from '@/app/components';

// Contexts
import { useInvoiceContext } from '@/context/InvoiceContext';
import { useTranslationContext } from '@/context/TranslationContext';

// Icons
import { FileInput, FolderUp, Import, Plus } from 'lucide-react';

import { BaseButton } from '../reusable/BaseButton';

import { InvoiceLoaderModal } from '../modals/invoice/InvoiceLoaderModal';
import { NewInvoiceAlert } from '../modals/alerts/NewInvoiceAlert';
import { InvoiceExportModal } from '../modals/invoice/InvoiceExportModal';
import { PdfViewer } from './actions/PdfViewer';

export const InvoiceActions = () => {
    const { invoicePdfLoading } = useInvoiceContext();
    const { _t } = useTranslationContext();

    return (
        <div className={`xl:w-[45%]`}>
            {/* @ts-ignore */}
            <Card className="h-auto sticky top-0 px-2">
                {/* @ts-ignore */}
                <CardHeader>
                    {/* @ts-ignore */}
                    <CardTitle>{_t('actions.title') ?? 'ACTIONS'}</CardTitle>
                    {/* @ts-ignore */}
                    <CardDescription>{_t('actions.description') ?? 'Operations and preview'}</CardDescription>
                </CardHeader>

                <div className="flex flex-col flex-wrap items-center gap-2">
                    <div className="flex flex-wrap gap-3">
                        {/* Load modal button */}
                        <InvoiceLoaderModal>
                            <BaseButton variant="outline" tooltipLabel="Open load invoice menu" disabled={invoicePdfLoading}>
                                <FolderUp />
                                {_t('actions.loadInvoice') ?? 'Load Invoice'}
                            </BaseButton>
                        </InvoiceLoaderModal>

                        {/* Export modal button */}
                        <InvoiceExportModal>
                            <BaseButton variant="outline" tooltipLabel="Open load invoice menu" disabled={invoicePdfLoading}>
                                <Import />
                                {_t('actions.exportInvoice') ?? 'Export Invoice'}
                            </BaseButton>
                        </InvoiceExportModal>
                    </div>

                    <div className="flex flex-wrap gap-3">
                        {/* New invoice button */}
                        <NewInvoiceAlert>
                            <BaseButton variant="outline" tooltipLabel="Get a new invoice form" disabled={invoicePdfLoading}>
                                <Plus />
                                {_t('actions.newInvoice') ?? 'New Invoice'}
                            </BaseButton>
                        </NewInvoiceAlert>

                        {/* Generate pdf button */}
                        <BaseButton
                            type="submit"
                            tooltipLabel="Generate your invoice"
                            loading={invoicePdfLoading}
                            loadingText="Generating your invoice"
                        >
                            <FileInput />
                            {_t('actions.generatePdf') ?? 'Generate PDF'}
                        </BaseButton>
                    </div>

                    <div className="w-full">
                        {/* Live preview and Final pdf */}
                        <PdfViewer />
                    </div>
                </div>
            </Card>
        </div>
    );
};
